<div class="content-area">

  <app-change-world *ngIf="skip || ms.game.canTravel; else noTravel"></app-change-world>
  <ng-template #noTravel>

    <h1>旅行到一个新世界
      <button class="btn btn-danger-outline btn-link"
              (click)="skip = true">跳过</button>
    </h1>

    <clr-alert [clrAlertType]="'alert-danger'"
               [clrAlertClosable]="false"
               *ngIf="!ms.game.researches.travel.done">
      <div class="alert-item">
        <span class="alert-text">
          旅行需要先完成研究旅行科技。
        </span>
      </div>
    </clr-alert>

    <div class="clr-row">
      <div class="clr-col-12 clr-col-sm-12 clr-col-md-6 clr-col-lg-6 clr-col-xl-6">
        <div class="card">
          <div class="card-block">
            <h3 class="card-title">
              你需要:
            </h3>
            <div *ngFor="let price of ms.game.currentWorld.winConditions; trackBy:getPriceId">
              <div class="winLabel">
                {{price.base.name}}
                <span class="monospace">
                  {{price.base.quantity | format:true}}/{{price.price | format:true}}
                </span>
              </div>

              <div class="progress-static"
                   [ngClass]="{'success': price.canBuy,'danger': !price.canBuy}">
                <div class="progress-meter"
                     [attr.data-value]="price.completedPercent"
                     [attr.data-displayval]="price.completedPercent"></div>
              </div>

            </div>
          </div>
        </div>
      </div>

      <div class="clr-col-12 clr-col-sm-12 clr-col-md-6 clr-col-lg-6 clr-col-xl-6"
           *ngIf="ms.game.currentWorld.notWinConditions?.length > 0">
        <div class="card">
          <div class="card-block">
            <h3 class="card-title">
              你必须杀死:
            </h3>
            <ul class="list-unstyled">
              <li *ngFor="let malus of ms.game.currentWorld.notWinConditions; trackBy:getMalusId">
                <span>
                  <clr-icon class="malusIcon"
                            [ngClass]="malus.isKilled ? 'ok':'no'"
                            [attr.shape]="malus.isKilled ? 'check' : 'times'"></clr-icon>
                  {{malus.name}}
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>

    </div>

  </ng-template>
</div>
